<template>
    <div class="release">
       <p>发布资讯</p>
        <Form :model="formItem" label-position="right" :label-width="80" style="margin-top: 20px">
            <FormItem label="插入图片：">
                <el-upload
                        class="avatar-uploader"
                        action="http://www.hfbb.com/api/common/upload"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        >
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </FormItem>
            <FormItem label="相册标题：">
                <Input v-model="formItem.content" type="text"  placeholder="请输入相册标题..." />
            </FormItem>
        </Form>
        <div style="padding-left: 100px">
            <Button type="primary" size="large" style="width: 206px" @click="subimt">发布</Button>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Release",
        data () {
            return {
                formItem:{},
                id:'',
                imageUrl:'',
                img:''
            }
        },
        methods: {
            handleAvatarSuccess (res) {
                console.log(res)
                this.imageUrl = this.$Url +res.data.url
                this.img = res.data.url
            },
            subimt () {
                let _this =this
                _this.$post('/api/activity/addpic',
                    {
                        token:_this.$token,
                        content:_this.formItem.content,
                        image:_this.img
                    }, function (res) {
                        _this.$message.success(res.msg);
                        _this.$router.push({path:'/my/myinfo/piclist'})
                    }, function (errcode, errmsg,err) {
                        console.log(err)
                        console.log(errmsg)
                    })
            }
        }
    }
</script>

<style  lang="less">
    @import "../../../style/style";
    .release{
        border: 1px solid @border-color;
        padding: 15px !important;
      p{
          color: @theme-color-dark;
          font-size: 18px;
          padding-bottom: 10px;
          border-bottom: 1px solid @theme-color-dark;
      }
        .avatar-uploader .el-upload {
            width: 178px;
            height: 178px;
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    }
</style>